
import React, { useEffect, useRef, useState } from 'react';
import { PlusOutlined, InboxOutlined } from '@ant-design/icons';
import { Upload, message } from 'antd';
import { downloadFileFromOSS, upFileToOSS } from '@/ui/xx-AliyunOSSUpload/client/AliOss';
import { uuid } from '@/utils';



/**
 * @description 阿里云对象储存 简单上传 
 * @param {*} param0 
 * @returns 
 */
const XxAliyunOSSUpload = ({
    accept = 'image/png,image/jpg,image/jpeg',
    maxCount = 5,
    multiple = true,
    value,
    onChange
}) => {

    const [fileList, setFileList] = useState([]);

    const customRequest = async ({ file, onSuccess, onError }) => {
        let metaData = {
            fileName: file.name,
            busiId: `contractEntity.contractCode`,
            busiType: 'OBC'
        }
        let res = await upFileToOSS(file, metaData);
        if (res.url) {
            // onChange(res.name)
            onSuccess({
                url: res.url,
                uid: uuid(),
                name: res.name
            });
            // setFileList([...fileList, file])
        } else {
            message.error("图片上传失败：")
            onError()
        }
    }

    useEffect(() => {
        // console.log("监听fileList:\n", fileList);
        if (fileList.length > 0) {
            let list = fileList.map(item => item && (item.response))
            console.log("图上列表：", list)
        }
    }, [fileList])


    useEffect(() => {
        if (value) {
            console.log("form表单的value更新了：\n", value);
            // http.post({
            //     url: "/aliossdownload",
            //     params: {
            //         fileName: value,
            //     },
            //     success: (res) => {
            //         console.log("获取到了图片预览地址：", res);
            //         setFileList([{
            //             url: res?.data?.url,
            //             uid: 12332,
            //             size: res?.data?.size
            //         }])
            //     },
            // });
        }
    }, [value])


    const uploadChange = ({ file, fileList: newFileList }) => {
        setFileList(newFileList)
        if (file.status === 'uploading') {
            return;
        }
        if (file.status === 'done' && onChange) {
            onChange(newFileList)
        }
        if (file.status === 'removed' && onChange) {
            onChange(newFileList)
        }
    }

    const initImage = async (fileName) => {
        let metaData = {
            fileName: fileName,
            busiId: `contractEntity.contractCode`,
            busiType: 'OBC'
        }
        let res = await downloadFileFromOSS(metaData);
        if (res.status === "0000") {
            // setImgUrl(res.data.url)
        } else {
            message.error("图片加载失败")
        }
    }


    return (
        <>

            <Upload
                accept={accept}
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                listType="picture-card"
                showUploadList={{ showPreviewIcon: false }}
                maxCount={maxCount}
                customRequest={customRequest}
                onChange={uploadChange}
                fileList={fileList}
                multiple={multiple}
            >
                <div>
                    <PlusOutlined />
                    <div
                        style={{
                            marginTop: 8,
                        }}
                    >
                        上传
                    </div>
                </div>
            </Upload>
        </>
    )
}

export default XxAliyunOSSUpload;